<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.1.3 (458534)"/><meta name="author" content="流星"/><meta name="created" content="2020-10-19 09:12:09 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2020-10-19 15:05:29 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>Module的加载实现</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">1、浏览器加载</h4>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">传统方法</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">HTML 网页中，浏览器通过&lt;script&gt;标签加载 JavaScript 脚本。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 页面内嵌的脚本 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"application/javascript"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// module code</span>
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 外部脚本 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"application/javascript"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"path/to/myModule.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"><span style="line-height: 160%; box-sizing: content-box;">
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!--由于浏览器脚本的默认语言是 JavaScript，因此type="application/javascript"可以省略。--&gt;</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 默认情况下，浏览器是同步加载 JavaScript 脚本
浏览器允许脚本异步加载，下面就是两种异步加载的语法。--&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"path/to/myModule.js"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">defer</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/></span></span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"path/to/myModule.js"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">async</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><em style="line-height: 160%; box-sizing: content-box; font-style: italic;">defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。</em></p>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">加载规则</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">浏览器加载 ES6 模块，也使用&lt;script&gt;标签，但是要加入type="module"属性。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"module"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./foo.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">浏览器对于带有type="module"的&lt;script&gt;，都是异步加载，等到整个页面渲染完，再执行模块脚本，等同于打开了&lt;script&gt;标签的<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">defer</strong>属性。<br/>
&lt;script&gt;标签的async属性也可以打开，这时只要加载完成，渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">ES6 模块也允许内嵌在网页中，语法行为与加载外部脚本完全一致。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"module"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> utils <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./utils.js"</span>;

  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// other code</span>
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">对于外部的模块脚本，有几点需要注意：<br/>
1、代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见。<br/>
2、模块脚本自动采用<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">严格模式</strong>，不管有没有声明use strict。<br/>
3、模块之中，可以使用import命令加载其他模块（.js后缀不可省略，需要提供绝对 URL 或相对 URL），也可以使用export命令输出对外接口。<br/>
4、<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的。</strong><br/>
5、<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">同一个模块如果加载多次，将只执行一次。</strong></p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">2、ES6 模块与 CommonJS 模块的差异</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">它们有三个重大差异：<br/>
1、CommonJS 模块输出的是一个值的<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">拷贝</strong>，ES6 模块输出的是值的<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">引用</strong>。<br/>
2、CommonJS 模块是<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">运行时加载</strong>，ES6 模块是<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">编译时输出接口</strong>。<br/>
3、CommonJS 模块的require()是<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">同步</strong>加载模块，ES6 模块的import命令是<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">异步</strong>加载，有一个独立的模块依赖的解析阶段。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">第二个差异是因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">只读引用</strong>，到被加载的那个模块里面去取值。由于 ES6 输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">对它进行重新赋值会报错</strong>。</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">3、Node.js 的模块加载方法</h4>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">概述</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">JavaScript 现在有两种模块。一种是 ES6 模块，简称 ESM；另一种是 CommonJS 模块，简称 CJS。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">CommonJS 模块是 Node.js 专用的，与 ES6 模块不兼容。语法上面，两者最明显的差异是，CommonJS 模块使用require()和module.exports，ES6 模块使用import和export。<br/>
从 Node.js v13.2 版本开始，Node.js 已经默认打开了 ES6 模块支持。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">.mjs文件总是以 ES6 模块加载，.cjs文件总是以 CommonJS 模块加载，.js文件的加载取决于package.json里面type字段的设置。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><em style="line-height: 160%; box-sizing: content-box; font-style: italic;">注意，ES6 模块与 CommonJS 模块尽量不要混用。require命令不能加载.mjs文件，会报错，只有import命令才可以加载.mjs文件。反过来，.mjs文件里面也不能使用require命令，必须使用import。</em></p>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">package.json 的 main 字段</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">package.json文件有两个字段可以指定模块的入口文件：main和exports。比较简单的模块，可以只使用main字段，指定模块加载的入口文件。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ./node_modules/es-module-package/package.json</span>
{
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"type"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"module"</span>,
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"main"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./src/index.js"</span>
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//上面代码指定项目的入口脚本为./src/index.js，它的格式为 ES6 模块。如果没有type字段，index.js就会被解释为 CommonJS 模块。</span>



<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//加载</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ./my-app.mjs</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> { something } <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'es-module-package'</span>;
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 实际加载的是 ./node_modules/es-module-package/src/index.js</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//上面代码中，运行该脚本以后，Node.js 就会到./node_modules目录下面，寻找es-module-package模块，然后根据该模块package.json的main字段去执行入口文件。</span>
</code></pre>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">package.json 的 exports 字段</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">exports字段的优先级高于main字段。它有多种用法。<br/>
（1）子目录别名<br/>
package.json文件的exports字段可以指定脚本或子目录的别名。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ./node_modules/es-module-package/package.json</span>
{
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"exports"</span>: {
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./features/"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./src/features/"</span>
  }
}

<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> feature <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'es-module-package/features/x.js'</span>;
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 加载 ./node_modules/es-module-package/src/features/x.js</span>


<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//如果没有指定别名，就不能用“模块+脚本名”这种形式加载脚本。</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 报错</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> submodule <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'es-module-package/private-module.js'</span>;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 不报错</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> submodule <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./node_modules/es-module-package/private-module.js'</span>;
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">（2）main 的别名<br/>
exports字段的别名如果是.，就代表模块的主入口，优先级高于main字段，并且可以直接简写成exports字段的值。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">{
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"exports"</span>: {
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"."</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./main.js"</span>
  }
}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 等同于</span>
{
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"exports"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./main.js"</span>
}
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">由于exports字段只有支持 ES6 的 Node.js 才认识，所以可以用来兼容旧版本的 Node.js。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">{
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"main"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./main-legacy.cjs"</span>,
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"exports"</span>: {
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"."</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./main-modern.cjs"</span>
  }
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//老版本的 Node.js （不支持 ES6 模块）的入口文件是main-legacy.cjs，新版本的 Node.js 的入口文件是main-modern.cjs。</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">（3）条件加载<br/>
利用.这个别名，可以为 ES6 模块和 CommonJS 指定不同的入口。目前，这个功能需要在 Node.js 运行的时候，打开--experimental-conditional-exports标志。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">{
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"type"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"module"</span>,
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"exports"</span>: {
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"."</span>: {
      <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"require"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./main.cjs"</span>,
      <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"default"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./main.js"</span>
    }
  }
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//别名.的require条件指定require()命令的入口文件（即 CommonJS 的入口），default条件指定其他情况的入口（即 ES6 的入口）。</span>


<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//简写</span>
{
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"exports"</span>: {
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"require"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./main.cjs"</span>,
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"default"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./main.js"</span>
  }
}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//注意，如果同时还有其他别名，就不能采用简写，否则或报错。</span>
{
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 报错</span>
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"exports"</span>: {
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./feature"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./lib/feature.js"</span>,
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"require"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./main.cjs"</span>,
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"default"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./main.js"</span>
  }
}
</code></pre>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">CommonJS 模块加载 ES6 模块</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">CommonJS 的require()命令不能加载 ES6 模块，会报错，只能使用import()这个方法加载。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">(<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">async</span> () =&gt; {
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">await</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./my-app.mjs'</span>);
})();
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">require()不支持 ES6 模块的一个原因是，它是同步加载，而 ES6 模块内部可以使用顶层await命令，导致无法被同步加载。</p>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">ES6 模块加载 CommonJS 模块</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">ES6 模块的import命令可以加载 CommonJS 模块，但是只能整体加载，不能只加载单一的输出项。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 正确</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> packageMain <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'commonjs-package'</span>;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 报错</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> { method } <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'commonjs-package'</span>;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//加载单一的输出项，可以写成下面这样</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> packageMain <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'commonjs-package'</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> { method } = packageMain;
</code></pre>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">同时支持两种格式的模块</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">一个模块可以同时支持 CommonJS 和 ES6 两种格式。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">如果原始模块是 ES6 格式，那么需要给出一个整体输出接口，比如export default obj，使得 CommonJS 可以用import()进行加载。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">如果原始模块是 CommonJS 格式，那么可以加一个包装层。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> cjsModule <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'../index.js'</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> foo = cjsModule.foo;
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">你可以把这个文件的后缀名改为.mjs，或者将它放在一个子目录，再在这个子目录里面放一个单独的package.json文件，指明{ type: "module" }。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">另一种做法是在package.json文件的exports字段，指明两种格式模块各自的加载入口。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"exports"</span>：{
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"require"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./index.js"</span>，
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"import"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./esm/wrapper.js"</span>
}
</code></pre>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">Node.js 的内置模块</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">Node.js 的内置模块可以整体加载，也可以加载指定的输出项。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 整体加载</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> EventEmitter <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'events'</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> e = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> EventEmitter();

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 加载指定的输出项</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> { readFile } <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'fs'</span>;
readFile(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./foo.txt'</span>, (err, source) =&gt; {
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">if</span> (err) {
    <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.error(err);
  } <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">else</span> {
    <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(source);
  }
});
</code></pre>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">加载路径</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">ES6 模块的加载路径必须给出脚本的完整路径，不能省略脚本的后缀名。import命令和package.json文件的main字段如果省略脚本的后缀名，会报错。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">为了与浏览器的import加载规则相同，Node.js 的.mjs文件支持 URL 路径。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">import './foo.mjs?query=1'; // 加载 ./foo 传入参数 ?query=1
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">目前，Node.js 的import命令只支持加载本地模块（file:协议）和data:协议，不支持加载远程模块。另外，脚本路径只支持相对路径，不支持绝对路径（即以/或//开头的路径）。</p>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">内部变量</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">ES6 模块应该是通用的，同一个模块不用修改，就可以用在浏览器环境和服务器环境。为了达到这个目标，Node.js 规定 ES6 模块之中不能使用 CommonJS 模块的特有的一些内部变量。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">首先，就是this关键字。<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块，这是两者的一个重大差异。</strong></p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">其次，以下这些顶层变量在 ES6 模块之中都是不存在的。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">arguments<br/>
require<br/>
module<br/>
exports<br/>
__filename<br/>
__dirname</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">4.循环加载</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">“循环加载”（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// a.js</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> b = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'b'</span>);

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// b.js</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> a = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'a'</span>);
</code></pre>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">CommonJS 模块的加载原理</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">CommonJS 的一个模块，就是一个脚本文件。require命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">{
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'...'</span>,
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">exports</span>: { ... },
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">loaded</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,
  ...
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//该对象的id属性是模块名，exports属性是模块输出的各个接口，loaded属性是一个布尔值，表示该模块的脚本是否执行完毕。以后需要用到这个模块的时候，就会到exports属性上面取值。即使再次执行require命令，也不会再次执行该模块，而是到缓存之中取值</span>
</code></pre>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">CommonJS 模块的循环加载</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">CommonJS 模块的重要特性是加载时执行，即脚本代码在 require 的 时候，就会全部执行。一旦出现某个模块被”循环加载”，就只输出已经 执行的部分，还未执行的部分不会输出。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//a.js</span>
exports.done = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">false</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> b = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./b.js'</span>);
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'在 a.js 之中，b.done = %j'</span>, b.done); exports.done = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>;
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'a.js 执行完毕'</span>);

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//b.js</span>
exports.done = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">false</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> a = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./a.js'</span>);
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'在 b.js 之中，a.done = %j'</span>, a.done); exports.done = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>;
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'b.js 执行完毕'</span>);

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//执行</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> a = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./a.js'</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> b = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./b.js'</span>);
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'在 main.js 之中, a.done=%j, b.done=%j'</span>, a.done, b.done);

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//结果</span>
在 b.js 之中，a.done = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">false</span> b.js 执行完毕
在 a.js 之中，b.done = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span> a.js 执行完毕
在 main.js 之中, a.done=<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>, b.done=<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//另外，由于CommonJS模块遇到循环加载时，返回的是当前已经执行的 部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输 入变量的时候，必须非常小心。</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> a = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'a'</span>); <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 安全的写法</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> foo = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'a'</span>).foo; <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 危险的写法</span>
exports.good = <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">arg</span>) </span>{
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> a.foo(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'good'</span>, arg); <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 使用的是 a.foo 的最新值</span>
};
exports.bad = <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">arg</span>) </span>{
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> foo(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'bad'</span>, arg); <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 使用的是一个部分加载时的值</span>
};
</code></pre>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">ES6 模块的循环加载</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">ES6 处理“循环加载”与CommonJS有本质的不同。ES6模块是动态引用， 如果使用 import 从一个模块加载变量(即 import foo from<br/>
'foo' )，那些变量不会被缓存，而是成为一个<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">指向被加载模块的引用</strong>，需要开发者自己保证，真正取值的时候能够取到值。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// a.js如下</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> {bar} <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./b.js'</span>;
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'a.js'</span>);
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(bar);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> foo = <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'foo'</span>;
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// b.js</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> {foo} <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./a.js'</span>;
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'b.js'</span>);
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(foo);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> bar = <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'bar'</span>;

$ babel-node a.js
b.js
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">undefined</span>
a.js
bar


<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// even.js</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> { odd } <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./odd'</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> counter = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">even</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">n</span>) </span>{
  counter++;
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> n === <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span> || odd(n - <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>);
}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// odd.js</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> { even } <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./even'</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">odd</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">n</span>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> n !== <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span> &amp;&amp; even(n - <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>);
}

 babel-node
&gt; <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> * <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">as</span> m <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./even.js'</span>;
&gt; m.even(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">10</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>
&gt; m.counter
<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">6</span>
&gt; m.even(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">20</span>)
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>
&gt; m.counter
<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">17</span>
</code></pre>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%23%23%23%23%201%E3%80%81%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8A%A0%E8%BD%BD%0A%23%23%23%23%23%23%20%E4%BC%A0%E7%BB%9F%E6%96%B9%E6%B3%95%0AHTML%20%E7%BD%91%E9%A1%B5%E4%B8%AD%EF%BC%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E9%80%9A%E8%BF%87%3Cscript%3E%E6%A0%87%E7%AD%BE%E5%8A%A0%E8%BD%BD%20JavaScript%20%E8%84%9A%E6%9C%AC%E3%80%82%0A%60%60%60html%0A%3C!--%20%E9%A1%B5%E9%9D%A2%E5%86%85%E5%B5%8C%E7%9A%84%E8%84%9A%E6%9C%AC%20--%3E%0A%3Cscript%20type%3D%22application%2Fjavascript%22%3E%0A%20%20%2F%2F%20module%20code%0A%3C%2Fscript%3E%0A%0A%3C!--%20%E5%A4%96%E9%83%A8%E8%84%9A%E6%9C%AC%20--%3E%0A%3Cscript%20type%3D%22application%2Fjavascript%22%20src%3D%22path%2Fto%2FmyModule.js%22%3E%0A%3C!--%E7%94%B1%E4%BA%8E%E6%B5%8F%E8%A7%88%E5%99%A8%E8%84%9A%E6%9C%AC%E7%9A%84%E9%BB%98%E8%AE%A4%E8%AF%AD%E8%A8%80%E6%98%AF%20JavaScript%EF%BC%8C%E5%9B%A0%E6%AD%A4type%3D%22application%2Fjavascript%22%E5%8F%AF%E4%BB%A5%E7%9C%81%E7%95%A5%E3%80%82--%3E%0A%0A%3C!--%20%E9%BB%98%E8%AE%A4%E6%83%85%E5%86%B5%E4%B8%8B%EF%BC%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E6%98%AF%E5%90%8C%E6%AD%A5%E5%8A%A0%E8%BD%BD%20JavaScript%20%E8%84%9A%E6%9C%AC%0A%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%81%E8%AE%B8%E8%84%9A%E6%9C%AC%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%EF%BC%8C%E4%B8%8B%E9%9D%A2%E5%B0%B1%E6%98%AF%E4%B8%A4%E7%A7%8D%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E7%9A%84%E8%AF%AD%E6%B3%95%E3%80%82--%3E%0A%3Cscript%20src%3D%22path%2Fto%2FmyModule.js%22%20defer%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22path%2Fto%2FmyModule.js%22%20async%3E%3C%2Fscript%3E%0A%3C%2Fscript%3E%0A%60%60%60%0A*defer%E4%B8%8Easync%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%EF%BC%9Adefer%E8%A6%81%E7%AD%89%E5%88%B0%E6%95%B4%E4%B8%AA%E9%A1%B5%E9%9D%A2%E5%9C%A8%E5%86%85%E5%AD%98%E4%B8%AD%E6%AD%A3%E5%B8%B8%E6%B8%B2%E6%9F%93%E7%BB%93%E6%9D%9F%EF%BC%88DOM%20%E7%BB%93%E6%9E%84%E5%AE%8C%E5%85%A8%E7%94%9F%E6%88%90%EF%BC%8C%E4%BB%A5%E5%8F%8A%E5%85%B6%E4%BB%96%E8%84%9A%E6%9C%AC%E6%89%A7%E8%A1%8C%E5%AE%8C%E6%88%90%EF%BC%89%EF%BC%8C%E6%89%8D%E4%BC%9A%E6%89%A7%E8%A1%8C%EF%BC%9Basync%E4%B8%80%E6%97%A6%E4%B8%8B%E8%BD%BD%E5%AE%8C%EF%BC%8C%E6%B8%B2%E6%9F%93%E5%BC%95%E6%93%8E%E5%B0%B1%E4%BC%9A%E4%B8%AD%E6%96%AD%E6%B8%B2%E6%9F%93%EF%BC%8C%E6%89%A7%E8%A1%8C%E8%BF%99%E4%B8%AA%E8%84%9A%E6%9C%AC%E4%BB%A5%E5%90%8E%EF%BC%8C%E5%86%8D%E7%BB%A7%E7%BB%AD%E6%B8%B2%E6%9F%93%E3%80%82*%0A%0A%23%23%23%23%23%23%20%E5%8A%A0%E8%BD%BD%E8%A7%84%E5%88%99%0A%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8A%A0%E8%BD%BD%20ES6%20%E6%A8%A1%E5%9D%97%EF%BC%8C%E4%B9%9F%E4%BD%BF%E7%94%A8%3Cscript%3E%E6%A0%87%E7%AD%BE%EF%BC%8C%E4%BD%86%E6%98%AF%E8%A6%81%E5%8A%A0%E5%85%A5type%3D%22module%22%E5%B1%9E%E6%80%A7%E3%80%82%0A%60%60%60html%0A%3Cscript%20type%3D%22module%22%20src%3D%22.%2Ffoo.js%22%3E%3C%2Fscript%3E%0A%60%60%60%0A%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9%E4%BA%8E%E5%B8%A6%E6%9C%89type%3D%22module%22%E7%9A%84%3Cscript%3E%EF%BC%8C%E9%83%BD%E6%98%AF%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%EF%BC%8C%E7%AD%89%E5%88%B0%E6%95%B4%E4%B8%AA%E9%A1%B5%E9%9D%A2%E6%B8%B2%E6%9F%93%E5%AE%8C%EF%BC%8C%E5%86%8D%E6%89%A7%E8%A1%8C%E6%A8%A1%E5%9D%97%E8%84%9A%E6%9C%AC%EF%BC%8C%E7%AD%89%E5%90%8C%E4%BA%8E%E6%89%93%E5%BC%80%E4%BA%86%3Cscript%3E%E6%A0%87%E7%AD%BE%E7%9A%84**defer**%E5%B1%9E%E6%80%A7%E3%80%82%0A%3Cscript%3E%E6%A0%87%E7%AD%BE%E7%9A%84async%E5%B1%9E%E6%80%A7%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%89%93%E5%BC%80%EF%BC%8C%E8%BF%99%E6%97%B6%E5%8F%AA%E8%A6%81%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90%EF%BC%8C%E6%B8%B2%E6%9F%93%E5%BC%95%E6%93%8E%E5%B0%B1%E4%BC%9A%E4%B8%AD%E6%96%AD%E6%B8%B2%E6%9F%93%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E3%80%82%E6%89%A7%E8%A1%8C%E5%AE%8C%E6%88%90%E5%90%8E%EF%BC%8C%E5%86%8D%E6%81%A2%E5%A4%8D%E6%B8%B2%E6%9F%93%E3%80%82%0A%0AES6%20%E6%A8%A1%E5%9D%97%E4%B9%9F%E5%85%81%E8%AE%B8%E5%86%85%E5%B5%8C%E5%9C%A8%E7%BD%91%E9%A1%B5%E4%B8%AD%EF%BC%8C%E8%AF%AD%E6%B3%95%E8%A1%8C%E4%B8%BA%E4%B8%8E%E5%8A%A0%E8%BD%BD%E5%A4%96%E9%83%A8%E8%84%9A%E6%9C%AC%E5%AE%8C%E5%85%A8%E4%B8%80%E8%87%B4%E3%80%82%0A%60%60%60html%0A%3Cscript%20type%3D%22module%22%3E%0A%20%20import%20utils%20from%20%22.%2Futils.js%22%3B%0A%0A%20%20%2F%2F%20other%20code%0A%3C%2Fscript%3E%0A%60%60%60%0A%0A%E5%AF%B9%E4%BA%8E%E5%A4%96%E9%83%A8%E7%9A%84%E6%A8%A1%E5%9D%97%E8%84%9A%E6%9C%AC%EF%BC%8C%E6%9C%89%E5%87%A0%E7%82%B9%E9%9C%80%E8%A6%81%E6%B3%A8%E6%84%8F%EF%BC%9A%0A1%E3%80%81%E4%BB%A3%E7%A0%81%E6%98%AF%E5%9C%A8%E6%A8%A1%E5%9D%97%E4%BD%9C%E7%94%A8%E5%9F%9F%E4%B9%8B%E4%B8%AD%E8%BF%90%E8%A1%8C%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AF%E5%9C%A8%E5%85%A8%E5%B1%80%E4%BD%9C%E7%94%A8%E5%9F%9F%E8%BF%90%E8%A1%8C%E3%80%82%E6%A8%A1%E5%9D%97%E5%86%85%E9%83%A8%E7%9A%84%E9%A1%B6%E5%B1%82%E5%8F%98%E9%87%8F%EF%BC%8C%E5%A4%96%E9%83%A8%E4%B8%8D%E5%8F%AF%E8%A7%81%E3%80%82%0A2%E3%80%81%E6%A8%A1%E5%9D%97%E8%84%9A%E6%9C%AC%E8%87%AA%E5%8A%A8%E9%87%87%E7%94%A8**%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F**%EF%BC%8C%E4%B8%8D%E7%AE%A1%E6%9C%89%E6%B2%A1%E6%9C%89%E5%A3%B0%E6%98%8Euse%20strict%E3%80%82%0A3%E3%80%81%E6%A8%A1%E5%9D%97%E4%B9%8B%E4%B8%AD%EF%BC%8C%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8import%E5%91%BD%E4%BB%A4%E5%8A%A0%E8%BD%BD%E5%85%B6%E4%BB%96%E6%A8%A1%E5%9D%97%EF%BC%88.js%E5%90%8E%E7%BC%80%E4%B8%8D%E5%8F%AF%E7%9C%81%E7%95%A5%EF%BC%8C%E9%9C%80%E8%A6%81%E6%8F%90%E4%BE%9B%E7%BB%9D%E5%AF%B9%20URL%20%E6%88%96%E7%9B%B8%E5%AF%B9%20URL%EF%BC%89%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8export%E5%91%BD%E4%BB%A4%E8%BE%93%E5%87%BA%E5%AF%B9%E5%A4%96%E6%8E%A5%E5%8F%A3%E3%80%82%0A4%E3%80%81**%E6%A8%A1%E5%9D%97%E4%B9%8B%E4%B8%AD%EF%BC%8C%E9%A1%B6%E5%B1%82%E7%9A%84this%E5%85%B3%E9%94%AE%E5%AD%97%E8%BF%94%E5%9B%9Eundefined%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AF%E6%8C%87%E5%90%91window%E3%80%82%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%EF%BC%8C%E5%9C%A8%E6%A8%A1%E5%9D%97%E9%A1%B6%E5%B1%82%E4%BD%BF%E7%94%A8this%E5%85%B3%E9%94%AE%E5%AD%97%EF%BC%8C%E6%98%AF%E6%97%A0%E6%84%8F%E4%B9%89%E7%9A%84%E3%80%82**%0A5%E3%80%81**%E5%90%8C%E4%B8%80%E4%B8%AA%E6%A8%A1%E5%9D%97%E5%A6%82%E6%9E%9C%E5%8A%A0%E8%BD%BD%E5%A4%9A%E6%AC%A1%EF%BC%8C%E5%B0%86%E5%8F%AA%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1%E3%80%82**%0A%0A%23%23%23%23%202%E3%80%81ES6%20%E6%A8%A1%E5%9D%97%E4%B8%8E%20CommonJS%20%E6%A8%A1%E5%9D%97%E7%9A%84%E5%B7%AE%E5%BC%82%0A%0A%E5%AE%83%E4%BB%AC%E6%9C%89%E4%B8%89%E4%B8%AA%E9%87%8D%E5%A4%A7%E5%B7%AE%E5%BC%82%EF%BC%9A%0A1%E3%80%81CommonJS%20%E6%A8%A1%E5%9D%97%E8%BE%93%E5%87%BA%E7%9A%84%E6%98%AF%E4%B8%80%E4%B8%AA%E5%80%BC%E7%9A%84**%E6%8B%B7%E8%B4%9D**%EF%BC%8CES6%20%E6%A8%A1%E5%9D%97%E8%BE%93%E5%87%BA%E7%9A%84%E6%98%AF%E5%80%BC%E7%9A%84**%E5%BC%95%E7%94%A8**%E3%80%82%0A2%E3%80%81CommonJS%20%E6%A8%A1%E5%9D%97%E6%98%AF**%E8%BF%90%E8%A1%8C%E6%97%B6%E5%8A%A0%E8%BD%BD**%EF%BC%8CES6%20%E6%A8%A1%E5%9D%97%E6%98%AF**%E7%BC%96%E8%AF%91%E6%97%B6%E8%BE%93%E5%87%BA%E6%8E%A5%E5%8F%A3**%E3%80%82%0A3%E3%80%81CommonJS%20%E6%A8%A1%E5%9D%97%E7%9A%84require()%E6%98%AF**%E5%90%8C%E6%AD%A5**%E5%8A%A0%E8%BD%BD%E6%A8%A1%E5%9D%97%EF%BC%8CES6%20%E6%A8%A1%E5%9D%97%E7%9A%84import%E5%91%BD%E4%BB%A4%E6%98%AF**%E5%BC%82%E6%AD%A5**%E5%8A%A0%E8%BD%BD%EF%BC%8C%E6%9C%89%E4%B8%80%E4%B8%AA%E7%8B%AC%E7%AB%8B%E7%9A%84%E6%A8%A1%E5%9D%97%E4%BE%9D%E8%B5%96%E7%9A%84%E8%A7%A3%E6%9E%90%E9%98%B6%E6%AE%B5%E3%80%82%0A%0A%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%B7%AE%E5%BC%82%E6%98%AF%E5%9B%A0%E4%B8%BA%20CommonJS%20%E5%8A%A0%E8%BD%BD%E7%9A%84%E6%98%AF%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%EF%BC%88%E5%8D%B3module.exports%E5%B1%9E%E6%80%A7%EF%BC%89%EF%BC%8C%E8%AF%A5%E5%AF%B9%E8%B1%A1%E5%8F%AA%E6%9C%89%E5%9C%A8%E8%84%9A%E6%9C%AC%E8%BF%90%E8%A1%8C%E5%AE%8C%E6%89%8D%E4%BC%9A%E7%94%9F%E6%88%90%E3%80%82%E8%80%8C%20ES6%20%E6%A8%A1%E5%9D%97%E4%B8%8D%E6%98%AF%E5%AF%B9%E8%B1%A1%EF%BC%8C%E5%AE%83%E7%9A%84%E5%AF%B9%E5%A4%96%E6%8E%A5%E5%8F%A3%E5%8F%AA%E6%98%AF%E4%B8%80%E7%A7%8D%E9%9D%99%E6%80%81%E5%AE%9A%E4%B9%89%EF%BC%8C%E5%9C%A8%E4%BB%A3%E7%A0%81%E9%9D%99%E6%80%81%E8%A7%A3%E6%9E%90%E9%98%B6%E6%AE%B5%E5%B0%B1%E4%BC%9A%E7%94%9F%E6%88%90%E3%80%82%0A%0AES6%20%E6%A8%A1%E5%9D%97%E7%9A%84%E8%BF%90%E8%A1%8C%E6%9C%BA%E5%88%B6%E4%B8%8E%20CommonJS%20%E4%B8%8D%E4%B8%80%E6%A0%B7%E3%80%82JS%20%E5%BC%95%E6%93%8E%E5%AF%B9%E8%84%9A%E6%9C%AC%E9%9D%99%E6%80%81%E5%88%86%E6%9E%90%E7%9A%84%E6%97%B6%E5%80%99%EF%BC%8C%E9%81%87%E5%88%B0%E6%A8%A1%E5%9D%97%E5%8A%A0%E8%BD%BD%E5%91%BD%E4%BB%A4import%EF%BC%8C%E5%B0%B1%E4%BC%9A%E7%94%9F%E6%88%90%E4%B8%80%E4%B8%AA%E5%8F%AA%E8%AF%BB%E5%BC%95%E7%94%A8%E3%80%82%E7%AD%89%E5%88%B0%E8%84%9A%E6%9C%AC%E7%9C%9F%E6%AD%A3%E6%89%A7%E8%A1%8C%E6%97%B6%EF%BC%8C%E5%86%8D%E6%A0%B9%E6%8D%AE%E8%BF%99%E4%B8%AA**%E5%8F%AA%E8%AF%BB%E5%BC%95%E7%94%A8**%EF%BC%8C%E5%88%B0%E8%A2%AB%E5%8A%A0%E8%BD%BD%E7%9A%84%E9%82%A3%E4%B8%AA%E6%A8%A1%E5%9D%97%E9%87%8C%E9%9D%A2%E5%8E%BB%E5%8F%96%E5%80%BC%E3%80%82%E7%94%B1%E4%BA%8E%20ES6%20%E8%BE%93%E5%85%A5%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8F%98%E9%87%8F%EF%BC%8C%E5%8F%AA%E6%98%AF%E4%B8%80%E4%B8%AA%E2%80%9C%E7%AC%A6%E5%8F%B7%E8%BF%9E%E6%8E%A5%E2%80%9D%EF%BC%8C%E6%89%80%E4%BB%A5%E8%BF%99%E4%B8%AA%E5%8F%98%E9%87%8F%E6%98%AF%E5%8F%AA%E8%AF%BB%E7%9A%84%EF%BC%8C**%E5%AF%B9%E5%AE%83%E8%BF%9B%E8%A1%8C%E9%87%8D%E6%96%B0%E8%B5%8B%E5%80%BC%E4%BC%9A%E6%8A%A5%E9%94%99**%E3%80%82%0A%0A%23%23%23%23%203%E3%80%81Node.js%20%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8A%A0%E8%BD%BD%E6%96%B9%E6%B3%95%0A%23%23%23%23%23%23%20%E6%A6%82%E8%BF%B0%0AJavaScript%20%E7%8E%B0%E5%9C%A8%E6%9C%89%E4%B8%A4%E7%A7%8D%E6%A8%A1%E5%9D%97%E3%80%82%E4%B8%80%E7%A7%8D%E6%98%AF%20ES6%20%E6%A8%A1%E5%9D%97%EF%BC%8C%E7%AE%80%E7%A7%B0%20ESM%EF%BC%9B%E5%8F%A6%E4%B8%80%E7%A7%8D%E6%98%AF%20CommonJS%20%E6%A8%A1%E5%9D%97%EF%BC%8C%E7%AE%80%E7%A7%B0%20CJS%E3%80%82%0A%0ACommonJS%20%E6%A8%A1%E5%9D%97%E6%98%AF%20Node.js%20%E4%B8%93%E7%94%A8%E7%9A%84%EF%BC%8C%E4%B8%8E%20ES6%20%E6%A8%A1%E5%9D%97%E4%B8%8D%E5%85%BC%E5%AE%B9%E3%80%82%E8%AF%AD%E6%B3%95%E4%B8%8A%E9%9D%A2%EF%BC%8C%E4%B8%A4%E8%80%85%E6%9C%80%E6%98%8E%E6%98%BE%E7%9A%84%E5%B7%AE%E5%BC%82%E6%98%AF%EF%BC%8CCommonJS%20%E6%A8%A1%E5%9D%97%E4%BD%BF%E7%94%A8require()%E5%92%8Cmodule.exports%EF%BC%8CES6%20%E6%A8%A1%E5%9D%97%E4%BD%BF%E7%94%A8import%E5%92%8Cexport%E3%80%82%0A%E4%BB%8E%20Node.js%20v13.2%20%E7%89%88%E6%9C%AC%E5%BC%80%E5%A7%8B%EF%BC%8CNode.js%20%E5%B7%B2%E7%BB%8F%E9%BB%98%E8%AE%A4%E6%89%93%E5%BC%80%E4%BA%86%20ES6%20%E6%A8%A1%E5%9D%97%E6%94%AF%E6%8C%81%E3%80%82%0A%0A.mjs%E6%96%87%E4%BB%B6%E6%80%BB%E6%98%AF%E4%BB%A5%20ES6%20%E6%A8%A1%E5%9D%97%E5%8A%A0%E8%BD%BD%EF%BC%8C.cjs%E6%96%87%E4%BB%B6%E6%80%BB%E6%98%AF%E4%BB%A5%20CommonJS%20%E6%A8%A1%E5%9D%97%E5%8A%A0%E8%BD%BD%EF%BC%8C.js%E6%96%87%E4%BB%B6%E7%9A%84%E5%8A%A0%E8%BD%BD%E5%8F%96%E5%86%B3%E4%BA%8Epackage.json%E9%87%8C%E9%9D%A2type%E5%AD%97%E6%AE%B5%E7%9A%84%E8%AE%BE%E7%BD%AE%E3%80%82%0A%0A*%E6%B3%A8%E6%84%8F%EF%BC%8CES6%20%E6%A8%A1%E5%9D%97%E4%B8%8E%20CommonJS%20%E6%A8%A1%E5%9D%97%E5%B0%BD%E9%87%8F%E4%B8%8D%E8%A6%81%E6%B7%B7%E7%94%A8%E3%80%82require%E5%91%BD%E4%BB%A4%E4%B8%8D%E8%83%BD%E5%8A%A0%E8%BD%BD.mjs%E6%96%87%E4%BB%B6%EF%BC%8C%E4%BC%9A%E6%8A%A5%E9%94%99%EF%BC%8C%E5%8F%AA%E6%9C%89import%E5%91%BD%E4%BB%A4%E6%89%8D%E5%8F%AF%E4%BB%A5%E5%8A%A0%E8%BD%BD.mjs%E6%96%87%E4%BB%B6%E3%80%82%E5%8F%8D%E8%BF%87%E6%9D%A5%EF%BC%8C.mjs%E6%96%87%E4%BB%B6%E9%87%8C%E9%9D%A2%E4%B9%9F%E4%B8%8D%E8%83%BD%E4%BD%BF%E7%94%A8require%E5%91%BD%E4%BB%A4%EF%BC%8C%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8import%E3%80%82*%0A%0A%23%23%23%23%23%23%20package.json%20%E7%9A%84%20main%20%E5%AD%97%E6%AE%B5%0Apackage.json%E6%96%87%E4%BB%B6%E6%9C%89%E4%B8%A4%E4%B8%AA%E5%AD%97%E6%AE%B5%E5%8F%AF%E4%BB%A5%E6%8C%87%E5%AE%9A%E6%A8%A1%E5%9D%97%E7%9A%84%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6%EF%BC%9Amain%E5%92%8Cexports%E3%80%82%E6%AF%94%E8%BE%83%E7%AE%80%E5%8D%95%E7%9A%84%E6%A8%A1%E5%9D%97%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%8F%AA%E4%BD%BF%E7%94%A8main%E5%AD%97%E6%AE%B5%EF%BC%8C%E6%8C%87%E5%AE%9A%E6%A8%A1%E5%9D%97%E5%8A%A0%E8%BD%BD%E7%9A%84%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6%E3%80%82%0A%60%60%60js%0A%2F%2F%20.%2Fnode_modules%2Fes-module-package%2Fpackage.json%0A%7B%0A%20%20%22type%22%3A%20%22module%22%2C%0A%20%20%22main%22%3A%20%22.%2Fsrc%2Findex.js%22%0A%7D%0A%2F%2F%E4%B8%8A%E9%9D%A2%E4%BB%A3%E7%A0%81%E6%8C%87%E5%AE%9A%E9%A1%B9%E7%9B%AE%E7%9A%84%E5%85%A5%E5%8F%A3%E8%84%9A%E6%9C%AC%E4%B8%BA.%2Fsrc%2Findex.js%EF%BC%8C%E5%AE%83%E7%9A%84%E6%A0%BC%E5%BC%8F%E4%B8%BA%20ES6%20%E6%A8%A1%E5%9D%97%E3%80%82%E5%A6%82%E6%9E%9C%E6%B2%A1%E6%9C%89type%E5%AD%97%E6%AE%B5%EF%BC%8Cindex.js%E5%B0%B1%E4%BC%9A%E8%A2%AB%E8%A7%A3%E9%87%8A%E4%B8%BA%20CommonJS%20%E6%A8%A1%E5%9D%97%E3%80%82%0A%0A%0A%0A%2F%2F%E5%8A%A0%E8%BD%BD%0A%0A%2F%2F%20.%2Fmy-app.mjs%0Aimport%20%7B%20something%20%7D%20from%20'es-module-package'%3B%0A%2F%2F%20%E5%AE%9E%E9%99%85%E5%8A%A0%E8%BD%BD%E7%9A%84%E6%98%AF%20.%2Fnode_modules%2Fes-module-package%2Fsrc%2Findex.js%0A%0A%2F%2F%E4%B8%8A%E9%9D%A2%E4%BB%A3%E7%A0%81%E4%B8%AD%EF%BC%8C%E8%BF%90%E8%A1%8C%E8%AF%A5%E8%84%9A%E6%9C%AC%E4%BB%A5%E5%90%8E%EF%BC%8CNode.js%20%E5%B0%B1%E4%BC%9A%E5%88%B0.%2Fnode_modules%E7%9B%AE%E5%BD%95%E4%B8%8B%E9%9D%A2%EF%BC%8C%E5%AF%BB%E6%89%BEes-module-package%E6%A8%A1%E5%9D%97%EF%BC%8C%E7%84%B6%E5%90%8E%E6%A0%B9%E6%8D%AE%E8%AF%A5%E6%A8%A1%E5%9D%97package.json%E7%9A%84main%E5%AD%97%E6%AE%B5%E5%8E%BB%E6%89%A7%E8%A1%8C%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6%E3%80%82%0A%60%60%60%0A%0A%23%23%23%23%23%23%20package.json%20%E7%9A%84%20exports%20%E5%AD%97%E6%AE%B5%0Aexports%E5%AD%97%E6%AE%B5%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7%E9%AB%98%E4%BA%8Emain%E5%AD%97%E6%AE%B5%E3%80%82%E5%AE%83%E6%9C%89%E5%A4%9A%E7%A7%8D%E7%94%A8%E6%B3%95%E3%80%82%0A%EF%BC%881%EF%BC%89%E5%AD%90%E7%9B%AE%E5%BD%95%E5%88%AB%E5%90%8D%0Apackage.json%E6%96%87%E4%BB%B6%E7%9A%84exports%E5%AD%97%E6%AE%B5%E5%8F%AF%E4%BB%A5%E6%8C%87%E5%AE%9A%E8%84%9A%E6%9C%AC%E6%88%96%E5%AD%90%E7%9B%AE%E5%BD%95%E7%9A%84%E5%88%AB%E5%90%8D%E3%80%82%0A%60%60%60js%0A%2F%2F%20.%2Fnode_modules%2Fes-module-package%2Fpackage.json%0A%7B%0A%20%20%22exports%22%3A%20%7B%0A%20%20%20%20%22.%2Ffeatures%2F%22%3A%20%22.%2Fsrc%2Ffeatures%2F%22%0A%20%20%7D%0A%7D%0A%0Aimport%20feature%20from%20'es-module-package%2Ffeatures%2Fx.js'%3B%0A%2F%2F%20%E5%8A%A0%E8%BD%BD%20.%2Fnode_modules%2Fes-module-package%2Fsrc%2Ffeatures%2Fx.js%0A%0A%0A%2F%2F%E5%A6%82%E6%9E%9C%E6%B2%A1%E6%9C%89%E6%8C%87%E5%AE%9A%E5%88%AB%E5%90%8D%EF%BC%8C%E5%B0%B1%E4%B8%8D%E8%83%BD%E7%94%A8%E2%80%9C%E6%A8%A1%E5%9D%97%2B%E8%84%9A%E6%9C%AC%E5%90%8D%E2%80%9D%E8%BF%99%E7%A7%8D%E5%BD%A2%E5%BC%8F%E5%8A%A0%E8%BD%BD%E8%84%9A%E6%9C%AC%E3%80%82%0A%2F%2F%20%E6%8A%A5%E9%94%99%0Aimport%20submodule%20from%20'es-module-package%2Fprivate-module.js'%3B%0A%0A%2F%2F%20%E4%B8%8D%E6%8A%A5%E9%94%99%0Aimport%20submodule%20from%20'.%2Fnode_modules%2Fes-module-package%2Fprivate-module.js'%3B%0A%60%60%60%0A%EF%BC%882%EF%BC%89main%20%E7%9A%84%E5%88%AB%E5%90%8D%0Aexports%E5%AD%97%E6%AE%B5%E7%9A%84%E5%88%AB%E5%90%8D%E5%A6%82%E6%9E%9C%E6%98%AF.%EF%BC%8C%E5%B0%B1%E4%BB%A3%E8%A1%A8%E6%A8%A1%E5%9D%97%E7%9A%84%E4%B8%BB%E5%85%A5%E5%8F%A3%EF%BC%8C%E4%BC%98%E5%85%88%E7%BA%A7%E9%AB%98%E4%BA%8Emain%E5%AD%97%E6%AE%B5%EF%BC%8C%E5%B9%B6%E4%B8%94%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E7%AE%80%E5%86%99%E6%88%90exports%E5%AD%97%E6%AE%B5%E7%9A%84%E5%80%BC%E3%80%82%0A%60%60%60js%0A%7B%0A%20%20%22exports%22%3A%20%7B%0A%20%20%20%20%22.%22%3A%20%22.%2Fmain.js%22%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20%E7%AD%89%E5%90%8C%E4%BA%8E%0A%7B%0A%20%20%22exports%22%3A%20%22.%2Fmain.js%22%0A%7D%0A%60%60%60%0A%E7%94%B1%E4%BA%8Eexports%E5%AD%97%E6%AE%B5%E5%8F%AA%E6%9C%89%E6%94%AF%E6%8C%81%20ES6%20%E7%9A%84%20Node.js%20%E6%89%8D%E8%AE%A4%E8%AF%86%EF%BC%8C%E6%89%80%E4%BB%A5%E5%8F%AF%E4%BB%A5%E7%94%A8%E6%9D%A5%E5%85%BC%E5%AE%B9%E6%97%A7%E7%89%88%E6%9C%AC%E7%9A%84%20Node.js%E3%80%82%0A%60%60%60js%0A%7B%0A%20%20%22main%22%3A%20%22.%2Fmain-legacy.cjs%22%2C%0A%20%20%22exports%22%3A%20%7B%0A%20%20%20%20%22.%22%3A%20%22.%2Fmain-modern.cjs%22%0A%20%20%7D%0A%7D%0A%2F%2F%E8%80%81%E7%89%88%E6%9C%AC%E7%9A%84%20Node.js%20%EF%BC%88%E4%B8%8D%E6%94%AF%E6%8C%81%20ES6%20%E6%A8%A1%E5%9D%97%EF%BC%89%E7%9A%84%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6%E6%98%AFmain-legacy.cjs%EF%BC%8C%E6%96%B0%E7%89%88%E6%9C%AC%E7%9A%84%20Node.js%20%E7%9A%84%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6%E6%98%AFmain-modern.cjs%E3%80%82%0A%60%60%60%0A%EF%BC%883%EF%BC%89%E6%9D%A1%E4%BB%B6%E5%8A%A0%E8%BD%BD%0A%E5%88%A9%E7%94%A8.%E8%BF%99%E4%B8%AA%E5%88%AB%E5%90%8D%EF%BC%8C%E5%8F%AF%E4%BB%A5%E4%B8%BA%20ES6%20%E6%A8%A1%E5%9D%97%E5%92%8C%20CommonJS%20%E6%8C%87%E5%AE%9A%E4%B8%8D%E5%90%8C%E7%9A%84%E5%85%A5%E5%8F%A3%E3%80%82%E7%9B%AE%E5%89%8D%EF%BC%8C%E8%BF%99%E4%B8%AA%E5%8A%9F%E8%83%BD%E9%9C%80%E8%A6%81%E5%9C%A8%20Node.js%20%E8%BF%90%E8%A1%8C%E7%9A%84%E6%97%B6%E5%80%99%EF%BC%8C%E6%89%93%E5%BC%80--experimental-conditional-exports%E6%A0%87%E5%BF%97%E3%80%82%0A%60%60%60js%0A%7B%0A%20%20%22type%22%3A%20%22module%22%2C%0A%20%20%22exports%22%3A%20%7B%0A%20%20%20%20%22.%22%3A%20%7B%0A%20%20%20%20%20%20%22require%22%3A%20%22.%2Fmain.cjs%22%2C%0A%20%20%20%20%20%20%22default%22%3A%20%22.%2Fmain.js%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%2F%2F%E5%88%AB%E5%90%8D.%E7%9A%84require%E6%9D%A1%E4%BB%B6%E6%8C%87%E5%AE%9Arequire()%E5%91%BD%E4%BB%A4%E7%9A%84%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6%EF%BC%88%E5%8D%B3%20CommonJS%20%E7%9A%84%E5%85%A5%E5%8F%A3%EF%BC%89%EF%BC%8Cdefault%E6%9D%A1%E4%BB%B6%E6%8C%87%E5%AE%9A%E5%85%B6%E4%BB%96%E6%83%85%E5%86%B5%E7%9A%84%E5%85%A5%E5%8F%A3%EF%BC%88%E5%8D%B3%20ES6%20%E7%9A%84%E5%85%A5%E5%8F%A3%EF%BC%89%E3%80%82%0A%0A%0A%2F%2F%E7%AE%80%E5%86%99%0A%7B%0A%20%20%22exports%22%3A%20%7B%0A%20%20%20%20%22require%22%3A%20%22.%2Fmain.cjs%22%2C%0A%20%20%20%20%22default%22%3A%20%22.%2Fmain.js%22%0A%20%20%7D%0A%7D%0A%0A%2F%2F%E6%B3%A8%E6%84%8F%EF%BC%8C%E5%A6%82%E6%9E%9C%E5%90%8C%E6%97%B6%E8%BF%98%E6%9C%89%E5%85%B6%E4%BB%96%E5%88%AB%E5%90%8D%EF%BC%8C%E5%B0%B1%E4%B8%8D%E8%83%BD%E9%87%87%E7%94%A8%E7%AE%80%E5%86%99%EF%BC%8C%E5%90%A6%E5%88%99%E6%88%96%E6%8A%A5%E9%94%99%E3%80%82%0A%7B%0A%20%20%2F%2F%20%E6%8A%A5%E9%94%99%0A%20%20%22exports%22%3A%20%7B%0A%20%20%20%20%22.%2Ffeature%22%3A%20%22.%2Flib%2Ffeature.js%22%2C%0A%20%20%20%20%22require%22%3A%20%22.%2Fmain.cjs%22%2C%0A%20%20%20%20%22default%22%3A%20%22.%2Fmain.js%22%0A%20%20%7D%0A%7D%0A%60%60%60%0A%0A%23%23%23%23%23%23%20CommonJS%20%E6%A8%A1%E5%9D%97%E5%8A%A0%E8%BD%BD%20ES6%20%E6%A8%A1%E5%9D%97%0ACommonJS%20%E7%9A%84require()%E5%91%BD%E4%BB%A4%E4%B8%8D%E8%83%BD%E5%8A%A0%E8%BD%BD%20ES6%20%E6%A8%A1%E5%9D%97%EF%BC%8C%E4%BC%9A%E6%8A%A5%E9%94%99%EF%BC%8C%E5%8F%AA%E8%83%BD%E4%BD%BF%E7%94%A8import()%E8%BF%99%E4%B8%AA%E6%96%B9%E6%B3%95%E5%8A%A0%E8%BD%BD%E3%80%82%0A%60%60%60js%0A(async%20()%20%3D%3E%20%7B%0A%20%20await%20import('.%2Fmy-app.mjs')%3B%0A%7D)()%3B%0A%60%60%60%0Arequire()%E4%B8%8D%E6%94%AF%E6%8C%81%20ES6%20%E6%A8%A1%E5%9D%97%E7%9A%84%E4%B8%80%E4%B8%AA%E5%8E%9F%E5%9B%A0%E6%98%AF%EF%BC%8C%E5%AE%83%E6%98%AF%E5%90%8C%E6%AD%A5%E5%8A%A0%E8%BD%BD%EF%BC%8C%E8%80%8C%20ES6%20%E6%A8%A1%E5%9D%97%E5%86%85%E9%83%A8%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%E9%A1%B6%E5%B1%82await%E5%91%BD%E4%BB%A4%EF%BC%8C%E5%AF%BC%E8%87%B4%E6%97%A0%E6%B3%95%E8%A2%AB%E5%90%8C%E6%AD%A5%E5%8A%A0%E8%BD%BD%E3%80%82%0A%0A%23%23%23%23%23%23%20ES6%20%E6%A8%A1%E5%9D%97%E5%8A%A0%E8%BD%BD%20CommonJS%20%E6%A8%A1%E5%9D%97%0AES6%20%E6%A8%A1%E5%9D%97%E7%9A%84import%E5%91%BD%E4%BB%A4%E5%8F%AF%E4%BB%A5%E5%8A%A0%E8%BD%BD%20CommonJS%20%E6%A8%A1%E5%9D%97%EF%BC%8C%E4%BD%86%E6%98%AF%E5%8F%AA%E8%83%BD%E6%95%B4%E4%BD%93%E5%8A%A0%E8%BD%BD%EF%BC%8C%E4%B8%8D%E8%83%BD%E5%8F%AA%E5%8A%A0%E8%BD%BD%E5%8D%95%E4%B8%80%E7%9A%84%E8%BE%93%E5%87%BA%E9%A1%B9%E3%80%82%0A%60%60%60js%0A%2F%2F%20%E6%AD%A3%E7%A1%AE%0Aimport%20packageMain%20from%20'commonjs-package'%3B%0A%0A%2F%2F%20%E6%8A%A5%E9%94%99%0Aimport%20%7B%20method%20%7D%20from%20'commonjs-package'%3B%0A%0A%2F%2F%E5%8A%A0%E8%BD%BD%E5%8D%95%E4%B8%80%E7%9A%84%E8%BE%93%E5%87%BA%E9%A1%B9%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%86%99%E6%88%90%E4%B8%8B%E9%9D%A2%E8%BF%99%E6%A0%B7%0Aimport%20packageMain%20from%20'commonjs-package'%3B%0Aconst%20%7B%20method%20%7D%20%3D%20packageMain%3B%0A%60%60%60%0A%0A%23%23%23%23%23%23%20%E5%90%8C%E6%97%B6%E6%94%AF%E6%8C%81%E4%B8%A4%E7%A7%8D%E6%A0%BC%E5%BC%8F%E7%9A%84%E6%A8%A1%E5%9D%97%0A%E4%B8%80%E4%B8%AA%E6%A8%A1%E5%9D%97%E5%8F%AF%E4%BB%A5%E5%90%8C%E6%97%B6%E6%94%AF%E6%8C%81%20CommonJS%20%E5%92%8C%20ES6%20%E4%B8%A4%E7%A7%8D%E6%A0%BC%E5%BC%8F%E3%80%82%0A%0A%E5%A6%82%E6%9E%9C%E5%8E%9F%E5%A7%8B%E6%A8%A1%E5%9D%97%E6%98%AF%20ES6%20%E6%A0%BC%E5%BC%8F%EF%BC%8C%E9%82%A3%E4%B9%88%E9%9C%80%E8%A6%81%E7%BB%99%E5%87%BA%E4%B8%80%E4%B8%AA%E6%95%B4%E4%BD%93%E8%BE%93%E5%87%BA%E6%8E%A5%E5%8F%A3%EF%BC%8C%E6%AF%94%E5%A6%82export%20default%20obj%EF%BC%8C%E4%BD%BF%E5%BE%97%20CommonJS%20%E5%8F%AF%E4%BB%A5%E7%94%A8import()%E8%BF%9B%E8%A1%8C%E5%8A%A0%E8%BD%BD%E3%80%82%0A%0A%E5%A6%82%E6%9E%9C%E5%8E%9F%E5%A7%8B%E6%A8%A1%E5%9D%97%E6%98%AF%20CommonJS%20%E6%A0%BC%E5%BC%8F%EF%BC%8C%E9%82%A3%E4%B9%88%E5%8F%AF%E4%BB%A5%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%8C%85%E8%A3%85%E5%B1%82%E3%80%82%0A%60%60%60js%0Aimport%20cjsModule%20from%20'..%2Findex.js'%3B%0Aexport%20const%20foo%20%3D%20cjsModule.foo%3B%0A%60%60%60%0A%0A%E4%BD%A0%E5%8F%AF%E4%BB%A5%E6%8A%8A%E8%BF%99%E4%B8%AA%E6%96%87%E4%BB%B6%E7%9A%84%E5%90%8E%E7%BC%80%E5%90%8D%E6%94%B9%E4%B8%BA.mjs%EF%BC%8C%E6%88%96%E8%80%85%E5%B0%86%E5%AE%83%E6%94%BE%E5%9C%A8%E4%B8%80%E4%B8%AA%E5%AD%90%E7%9B%AE%E5%BD%95%EF%BC%8C%E5%86%8D%E5%9C%A8%E8%BF%99%E4%B8%AA%E5%AD%90%E7%9B%AE%E5%BD%95%E9%87%8C%E9%9D%A2%E6%94%BE%E4%B8%80%E4%B8%AA%E5%8D%95%E7%8B%AC%E7%9A%84package.json%E6%96%87%E4%BB%B6%EF%BC%8C%E6%8C%87%E6%98%8E%7B%20type%3A%20%22module%22%20%7D%E3%80%82%0A%0A%E5%8F%A6%E4%B8%80%E7%A7%8D%E5%81%9A%E6%B3%95%E6%98%AF%E5%9C%A8package.json%E6%96%87%E4%BB%B6%E7%9A%84exports%E5%AD%97%E6%AE%B5%EF%BC%8C%E6%8C%87%E6%98%8E%E4%B8%A4%E7%A7%8D%E6%A0%BC%E5%BC%8F%E6%A8%A1%E5%9D%97%E5%90%84%E8%87%AA%E7%9A%84%E5%8A%A0%E8%BD%BD%E5%85%A5%E5%8F%A3%E3%80%82%0A%60%60%60js%0A%22exports%22%EF%BC%9A%7B%0A%20%20%22require%22%3A%20%22.%2Findex.js%22%EF%BC%8C%0A%20%20%22import%22%3A%20%22.%2Fesm%2Fwrapper.js%22%0A%7D%0A%60%60%60%0A%0A%23%23%23%23%23%23%20Node.js%20%E7%9A%84%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97%0ANode.js%20%E7%9A%84%E5%86%85%E7%BD%AE%E6%A8%A1%E5%9D%97%E5%8F%AF%E4%BB%A5%E6%95%B4%E4%BD%93%E5%8A%A0%E8%BD%BD%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%8A%A0%E8%BD%BD%E6%8C%87%E5%AE%9A%E7%9A%84%E8%BE%93%E5%87%BA%E9%A1%B9%E3%80%82%0A%60%60%60js%0A%2F%2F%20%E6%95%B4%E4%BD%93%E5%8A%A0%E8%BD%BD%0Aimport%20EventEmitter%20from%20'events'%3B%0Aconst%20e%20%3D%20new%20EventEmitter()%3B%0A%0A%2F%2F%20%E5%8A%A0%E8%BD%BD%E6%8C%87%E5%AE%9A%E7%9A%84%E8%BE%93%E5%87%BA%E9%A1%B9%0Aimport%20%7B%20readFile%20%7D%20from%20'fs'%3B%0AreadFile('.%2Ffoo.txt'%2C%20(err%2C%20source)%20%3D%3E%20%7B%0A%20%20if%20(err)%20%7B%0A%20%20%20%20console.error(err)%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20console.log(source)%3B%0A%20%20%7D%0A%7D)%3B%0A%60%60%60%0A%0A%23%23%23%23%23%23%20%E5%8A%A0%E8%BD%BD%E8%B7%AF%E5%BE%84%0AES6%20%E6%A8%A1%E5%9D%97%E7%9A%84%E5%8A%A0%E8%BD%BD%E8%B7%AF%E5%BE%84%E5%BF%85%E9%A1%BB%E7%BB%99%E5%87%BA%E8%84%9A%E6%9C%AC%E7%9A%84%E5%AE%8C%E6%95%B4%E8%B7%AF%E5%BE%84%EF%BC%8C%E4%B8%8D%E8%83%BD%E7%9C%81%E7%95%A5%E8%84%9A%E6%9C%AC%E7%9A%84%E5%90%8E%E7%BC%80%E5%90%8D%E3%80%82import%E5%91%BD%E4%BB%A4%E5%92%8Cpackage.json%E6%96%87%E4%BB%B6%E7%9A%84main%E5%AD%97%E6%AE%B5%E5%A6%82%E6%9E%9C%E7%9C%81%E7%95%A5%E8%84%9A%E6%9C%AC%E7%9A%84%E5%90%8E%E7%BC%80%E5%90%8D%EF%BC%8C%E4%BC%9A%E6%8A%A5%E9%94%99%E3%80%82%0A%0A%E4%B8%BA%E4%BA%86%E4%B8%8E%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84import%E5%8A%A0%E8%BD%BD%E8%A7%84%E5%88%99%E7%9B%B8%E5%90%8C%EF%BC%8CNode.js%20%E7%9A%84.mjs%E6%96%87%E4%BB%B6%E6%94%AF%E6%8C%81%20URL%20%E8%B7%AF%E5%BE%84%E3%80%82%0A%60%60%60%0Aimport%20'.%2Ffoo.mjs%3Fquery%3D1'%3B%20%2F%2F%20%E5%8A%A0%E8%BD%BD%20.%2Ffoo%20%E4%BC%A0%E5%85%A5%E5%8F%82%E6%95%B0%20%3Fquery%3D1%0A%60%60%60%0A%E7%9B%AE%E5%89%8D%EF%BC%8CNode.js%20%E7%9A%84import%E5%91%BD%E4%BB%A4%E5%8F%AA%E6%94%AF%E6%8C%81%E5%8A%A0%E8%BD%BD%E6%9C%AC%E5%9C%B0%E6%A8%A1%E5%9D%97%EF%BC%88file%3A%E5%8D%8F%E8%AE%AE%EF%BC%89%E5%92%8Cdata%3A%E5%8D%8F%E8%AE%AE%EF%BC%8C%E4%B8%8D%E6%94%AF%E6%8C%81%E5%8A%A0%E8%BD%BD%E8%BF%9C%E7%A8%8B%E6%A8%A1%E5%9D%97%E3%80%82%E5%8F%A6%E5%A4%96%EF%BC%8C%E8%84%9A%E6%9C%AC%E8%B7%AF%E5%BE%84%E5%8F%AA%E6%94%AF%E6%8C%81%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%EF%BC%8C%E4%B8%8D%E6%94%AF%E6%8C%81%E7%BB%9D%E5%AF%B9%E8%B7%AF%E5%BE%84%EF%BC%88%E5%8D%B3%E4%BB%A5%2F%E6%88%96%2F%2F%E5%BC%80%E5%A4%B4%E7%9A%84%E8%B7%AF%E5%BE%84%EF%BC%89%E3%80%82%0A%0A%23%23%23%23%23%23%20%E5%86%85%E9%83%A8%E5%8F%98%E9%87%8F%0AES6%20%E6%A8%A1%E5%9D%97%E5%BA%94%E8%AF%A5%E6%98%AF%E9%80%9A%E7%94%A8%E7%9A%84%EF%BC%8C%E5%90%8C%E4%B8%80%E4%B8%AA%E6%A8%A1%E5%9D%97%E4%B8%8D%E7%94%A8%E4%BF%AE%E6%94%B9%EF%BC%8C%E5%B0%B1%E5%8F%AF%E4%BB%A5%E7%94%A8%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E7%8E%AF%E5%A2%83%E5%92%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%8E%AF%E5%A2%83%E3%80%82%E4%B8%BA%E4%BA%86%E8%BE%BE%E5%88%B0%E8%BF%99%E4%B8%AA%E7%9B%AE%E6%A0%87%EF%BC%8CNode.js%20%E8%A7%84%E5%AE%9A%20ES6%20%E6%A8%A1%E5%9D%97%E4%B9%8B%E4%B8%AD%E4%B8%8D%E8%83%BD%E4%BD%BF%E7%94%A8%20CommonJS%20%E6%A8%A1%E5%9D%97%E7%9A%84%E7%89%B9%E6%9C%89%E7%9A%84%E4%B8%80%E4%BA%9B%E5%86%85%E9%83%A8%E5%8F%98%E9%87%8F%E3%80%82%0A%0A%E9%A6%96%E5%85%88%EF%BC%8C%E5%B0%B1%E6%98%AFthis%E5%85%B3%E9%94%AE%E5%AD%97%E3%80%82**ES6%20%E6%A8%A1%E5%9D%97%E4%B9%8B%E4%B8%AD%EF%BC%8C%E9%A1%B6%E5%B1%82%E7%9A%84this%E6%8C%87%E5%90%91undefined%EF%BC%9BCommonJS%20%E6%A8%A1%E5%9D%97%E7%9A%84%E9%A1%B6%E5%B1%82this%E6%8C%87%E5%90%91%E5%BD%93%E5%89%8D%E6%A8%A1%E5%9D%97%EF%BC%8C%E8%BF%99%E6%98%AF%E4%B8%A4%E8%80%85%E7%9A%84%E4%B8%80%E4%B8%AA%E9%87%8D%E5%A4%A7%E5%B7%AE%E5%BC%82%E3%80%82**%0A%0A%E5%85%B6%E6%AC%A1%EF%BC%8C%E4%BB%A5%E4%B8%8B%E8%BF%99%E4%BA%9B%E9%A1%B6%E5%B1%82%E5%8F%98%E9%87%8F%E5%9C%A8%20ES6%20%E6%A8%A1%E5%9D%97%E4%B9%8B%E4%B8%AD%E9%83%BD%E6%98%AF%E4%B8%8D%E5%AD%98%E5%9C%A8%E7%9A%84%E3%80%82%0A%0Aarguments%0Arequire%0Amodule%0Aexports%0A__filename%0A__dirname%0A%0A%23%23%23%23%204.%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD%0A%E2%80%9C%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD%E2%80%9D%EF%BC%88circular%20dependency%EF%BC%89%E6%8C%87%E7%9A%84%E6%98%AF%EF%BC%8Ca%E8%84%9A%E6%9C%AC%E7%9A%84%E6%89%A7%E8%A1%8C%E4%BE%9D%E8%B5%96b%E8%84%9A%E6%9C%AC%EF%BC%8C%E8%80%8Cb%E8%84%9A%E6%9C%AC%E7%9A%84%E6%89%A7%E8%A1%8C%E5%8F%88%E4%BE%9D%E8%B5%96a%E8%84%9A%E6%9C%AC%E3%80%82%0A%60%60%60js%0A%2F%2F%20a.js%0Avar%20b%20%3D%20require('b')%3B%0A%0A%2F%2F%20b.js%0Avar%20a%20%3D%20require('a')%3B%0A%60%60%60%0A%0A%23%23%23%23%23%23%20CommonJS%20%E6%A8%A1%E5%9D%97%E7%9A%84%E5%8A%A0%E8%BD%BD%E5%8E%9F%E7%90%86%0ACommonJS%20%E7%9A%84%E4%B8%80%E4%B8%AA%E6%A8%A1%E5%9D%97%EF%BC%8C%E5%B0%B1%E6%98%AF%E4%B8%80%E4%B8%AA%E8%84%9A%E6%9C%AC%E6%96%87%E4%BB%B6%E3%80%82require%E5%91%BD%E4%BB%A4%E7%AC%AC%E4%B8%80%E6%AC%A1%E5%8A%A0%E8%BD%BD%E8%AF%A5%E8%84%9A%E6%9C%AC%EF%BC%8C%E5%B0%B1%E4%BC%9A%E6%89%A7%E8%A1%8C%E6%95%B4%E4%B8%AA%E8%84%9A%E6%9C%AC%EF%BC%8C%E7%84%B6%E5%90%8E%E5%9C%A8%E5%86%85%E5%AD%98%E7%94%9F%E6%88%90%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E3%80%82%0A%60%60%60js%0A%7B%0A%20%20id%3A%20'...'%2C%0A%20%20exports%3A%20%7B%20...%20%7D%2C%0A%20%20loaded%3A%20true%2C%0A%20%20...%0A%7D%0A%2F%2F%E8%AF%A5%E5%AF%B9%E8%B1%A1%E7%9A%84id%E5%B1%9E%E6%80%A7%E6%98%AF%E6%A8%A1%E5%9D%97%E5%90%8D%EF%BC%8Cexports%E5%B1%9E%E6%80%A7%E6%98%AF%E6%A8%A1%E5%9D%97%E8%BE%93%E5%87%BA%E7%9A%84%E5%90%84%E4%B8%AA%E6%8E%A5%E5%8F%A3%EF%BC%8Cloaded%E5%B1%9E%E6%80%A7%E6%98%AF%E4%B8%80%E4%B8%AA%E5%B8%83%E5%B0%94%E5%80%BC%EF%BC%8C%E8%A1%A8%E7%A4%BA%E8%AF%A5%E6%A8%A1%E5%9D%97%E7%9A%84%E8%84%9A%E6%9C%AC%E6%98%AF%E5%90%A6%E6%89%A7%E8%A1%8C%E5%AE%8C%E6%AF%95%E3%80%82%E4%BB%A5%E5%90%8E%E9%9C%80%E8%A6%81%E7%94%A8%E5%88%B0%E8%BF%99%E4%B8%AA%E6%A8%A1%E5%9D%97%E7%9A%84%E6%97%B6%E5%80%99%EF%BC%8C%E5%B0%B1%E4%BC%9A%E5%88%B0exports%E5%B1%9E%E6%80%A7%E4%B8%8A%E9%9D%A2%E5%8F%96%E5%80%BC%E3%80%82%E5%8D%B3%E4%BD%BF%E5%86%8D%E6%AC%A1%E6%89%A7%E8%A1%8Crequire%E5%91%BD%E4%BB%A4%EF%BC%8C%E4%B9%9F%E4%B8%8D%E4%BC%9A%E5%86%8D%E6%AC%A1%E6%89%A7%E8%A1%8C%E8%AF%A5%E6%A8%A1%E5%9D%97%EF%BC%8C%E8%80%8C%E6%98%AF%E5%88%B0%E7%BC%93%E5%AD%98%E4%B9%8B%E4%B8%AD%E5%8F%96%E5%80%BC%0A%60%60%60%0A%0A%23%23%23%23%23%23%20CommonJS%20%E6%A8%A1%E5%9D%97%E7%9A%84%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD%0ACommonJS%20%E6%A8%A1%E5%9D%97%E7%9A%84%E9%87%8D%E8%A6%81%E7%89%B9%E6%80%A7%E6%98%AF%E5%8A%A0%E8%BD%BD%E6%97%B6%E6%89%A7%E8%A1%8C%EF%BC%8C%E5%8D%B3%E8%84%9A%E6%9C%AC%E4%BB%A3%E7%A0%81%E5%9C%A8%20require%20%E7%9A%84%20%E6%97%B6%E5%80%99%EF%BC%8C%E5%B0%B1%E4%BC%9A%E5%85%A8%E9%83%A8%E6%89%A7%E8%A1%8C%E3%80%82%E4%B8%80%E6%97%A6%E5%87%BA%E7%8E%B0%E6%9F%90%E4%B8%AA%E6%A8%A1%E5%9D%97%E8%A2%AB%E2%80%9D%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD%E2%80%9D%EF%BC%8C%E5%B0%B1%E5%8F%AA%E8%BE%93%E5%87%BA%E5%B7%B2%E7%BB%8F%20%E6%89%A7%E8%A1%8C%E7%9A%84%E9%83%A8%E5%88%86%EF%BC%8C%E8%BF%98%E6%9C%AA%E6%89%A7%E8%A1%8C%E7%9A%84%E9%83%A8%E5%88%86%E4%B8%8D%E4%BC%9A%E8%BE%93%E5%87%BA%E3%80%82%0A%60%60%60js%0A%2F%2Fa.js%0Aexports.done%20%3D%20false%3B%0Avar%20b%20%3D%20require('.%2Fb.js')%3B%0Aconsole.log('%E5%9C%A8%20a.js%20%E4%B9%8B%E4%B8%AD%EF%BC%8Cb.done%20%3D%20%25j'%2C%20b.done)%3B%20exports.done%20%3D%20true%3B%0Aconsole.log('a.js%20%E6%89%A7%E8%A1%8C%E5%AE%8C%E6%AF%95')%3B%0A%0A%2F%2Fb.js%0Aexports.done%20%3D%20false%3B%0Avar%20a%20%3D%20require('.%2Fa.js')%3B%0Aconsole.log('%E5%9C%A8%20b.js%20%E4%B9%8B%E4%B8%AD%EF%BC%8Ca.done%20%3D%20%25j'%2C%20a.done)%3B%20exports.done%20%3D%20true%3B%0Aconsole.log('b.js%20%E6%89%A7%E8%A1%8C%E5%AE%8C%E6%AF%95')%3B%0A%0A%2F%2F%E6%89%A7%E8%A1%8C%0Avar%20a%20%3D%20require('.%2Fa.js')%3B%0Avar%20b%20%3D%20require('.%2Fb.js')%3B%0Aconsole.log('%E5%9C%A8%20main.js%20%E4%B9%8B%E4%B8%AD%2C%20a.done%3D%25j%2C%20b.done%3D%25j'%2C%20a.done%2C%20b.done)%3B%0A%0A%2F%2F%E7%BB%93%E6%9E%9C%0A%E5%9C%A8%20b.js%20%E4%B9%8B%E4%B8%AD%EF%BC%8Ca.done%20%3D%20false%20b.js%20%E6%89%A7%E8%A1%8C%E5%AE%8C%E6%AF%95%0A%E5%9C%A8%20a.js%20%E4%B9%8B%E4%B8%AD%EF%BC%8Cb.done%20%3D%20true%20a.js%20%E6%89%A7%E8%A1%8C%E5%AE%8C%E6%AF%95%0A%E5%9C%A8%20main.js%20%E4%B9%8B%E4%B8%AD%2C%20a.done%3Dtrue%2C%20b.done%3Dtrue%0A%0A%2F%2F%E5%8F%A6%E5%A4%96%EF%BC%8C%E7%94%B1%E4%BA%8ECommonJS%E6%A8%A1%E5%9D%97%E9%81%87%E5%88%B0%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD%E6%97%B6%EF%BC%8C%E8%BF%94%E5%9B%9E%E7%9A%84%E6%98%AF%E5%BD%93%E5%89%8D%E5%B7%B2%E7%BB%8F%E6%89%A7%E8%A1%8C%E7%9A%84%20%E9%83%A8%E5%88%86%E7%9A%84%E5%80%BC%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AF%E4%BB%A3%E7%A0%81%E5%85%A8%E9%83%A8%E6%89%A7%E8%A1%8C%E5%90%8E%E7%9A%84%E5%80%BC%EF%BC%8C%E4%B8%A4%E8%80%85%E5%8F%AF%E8%83%BD%E4%BC%9A%E6%9C%89%E5%B7%AE%E5%BC%82%E3%80%82%E6%89%80%E4%BB%A5%EF%BC%8C%E8%BE%93%20%E5%85%A5%E5%8F%98%E9%87%8F%E7%9A%84%E6%97%B6%E5%80%99%EF%BC%8C%E5%BF%85%E9%A1%BB%E9%9D%9E%E5%B8%B8%E5%B0%8F%E5%BF%83%E3%80%82%0Avar%20a%20%3D%20require('a')%3B%20%2F%2F%20%E5%AE%89%E5%85%A8%E7%9A%84%E5%86%99%E6%B3%95%0Avar%20foo%20%3D%20require('a').foo%3B%20%2F%2F%20%E5%8D%B1%E9%99%A9%E7%9A%84%E5%86%99%E6%B3%95%0Aexports.good%20%3D%20function%20(arg)%20%7B%0Areturn%20a.foo('good'%2C%20arg)%3B%20%2F%2F%20%E4%BD%BF%E7%94%A8%E7%9A%84%E6%98%AF%20a.foo%20%E7%9A%84%E6%9C%80%E6%96%B0%E5%80%BC%0A%7D%3B%0Aexports.bad%20%3D%20function%20(arg)%20%7B%0Areturn%20foo('bad'%2C%20arg)%3B%20%2F%2F%20%E4%BD%BF%E7%94%A8%E7%9A%84%E6%98%AF%E4%B8%80%E4%B8%AA%E9%83%A8%E5%88%86%E5%8A%A0%E8%BD%BD%E6%97%B6%E7%9A%84%E5%80%BC%0A%7D%3B%0A%60%60%60%0A%0A%23%23%23%23%23%23%20ES6%20%E6%A8%A1%E5%9D%97%E7%9A%84%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD%0AES6%20%E5%A4%84%E7%90%86%E2%80%9C%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD%E2%80%9D%E4%B8%8ECommonJS%E6%9C%89%E6%9C%AC%E8%B4%A8%E7%9A%84%E4%B8%8D%E5%90%8C%E3%80%82ES6%E6%A8%A1%E5%9D%97%E6%98%AF%E5%8A%A8%E6%80%81%E5%BC%95%E7%94%A8%EF%BC%8C%20%E5%A6%82%E6%9E%9C%E4%BD%BF%E7%94%A8%20import%20%E4%BB%8E%E4%B8%80%E4%B8%AA%E6%A8%A1%E5%9D%97%E5%8A%A0%E8%BD%BD%E5%8F%98%E9%87%8F(%E5%8D%B3%20import%20foo%20from%0A'foo'%20)%EF%BC%8C%E9%82%A3%E4%BA%9B%E5%8F%98%E9%87%8F%E4%B8%8D%E4%BC%9A%E8%A2%AB%E7%BC%93%E5%AD%98%EF%BC%8C%E8%80%8C%E6%98%AF%E6%88%90%E4%B8%BA%E4%B8%80%E4%B8%AA**%E6%8C%87%E5%90%91%E8%A2%AB%E5%8A%A0%E8%BD%BD%E6%A8%A1%E5%9D%97%E7%9A%84%E5%BC%95%E7%94%A8**%EF%BC%8C%E9%9C%80%E8%A6%81%E5%BC%80%E5%8F%91%E8%80%85%E8%87%AA%E5%B7%B1%E4%BF%9D%E8%AF%81%EF%BC%8C%E7%9C%9F%E6%AD%A3%E5%8F%96%E5%80%BC%E7%9A%84%E6%97%B6%E5%80%99%E8%83%BD%E5%A4%9F%E5%8F%96%E5%88%B0%E5%80%BC%E3%80%82%0A%60%60%60js%0A%2F%2F%20a.js%E5%A6%82%E4%B8%8B%0Aimport%20%7Bbar%7D%20from%20'.%2Fb.js'%3B%0Aconsole.log('a.js')%3B%0Aconsole.log(bar)%3B%0Aexport%20let%20foo%20%3D%20'foo'%3B%0A%2F%2F%20b.js%0Aimport%20%7Bfoo%7D%20from%20'.%2Fa.js'%3B%0Aconsole.log('b.js')%3B%0Aconsole.log(foo)%3B%0Aexport%20let%20bar%20%3D%20'bar'%3B%0A%0A%24%20babel-node%20a.js%0Ab.js%0Aundefined%0Aa.js%0Abar%0A%0A%0A%2F%2F%20even.js%0Aimport%20%7B%20odd%20%7D%20from%20'.%2Fodd'%0Aexport%20var%20counter%20%3D%200%3B%0Aexport%20function%20even(n)%20%7B%0A%20%20counter%2B%2B%3B%0A%20%20return%20n%20%3D%3D%3D%200%20%7C%7C%20odd(n%20-%201)%3B%0A%7D%0A%0A%2F%2F%20odd.js%0Aimport%20%7B%20even%20%7D%20from%20'.%2Feven'%3B%0Aexport%20function%20odd(n)%20%7B%0A%20%20return%20n%20!%3D%3D%200%20%26%26%20even(n%20-%201)%3B%0A%7D%0A%0A%20babel-node%0A%3E%20import%20*%20as%20m%20from%20'.%2Feven.js'%3B%0A%3E%20m.even(10)%3B%0Atrue%0A%3E%20m.counter%0A6%0A%3E%20m.even(20)%0Atrue%0A%3E%20m.counter%0A17%0A%60%60%60</center></body></html>